<template>
  <div class="container-login">
    <div class="login-wrap">
      <!-- logo -->
      <div class="login-logo"></div>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="0"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入登录账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            placeholder="请输入登录密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%" @click="submitForm('ruleForm')">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 表单校验函数
    var validateUsername = (rule, value, callback) => {
      // 表单内容不合法
      if (value.trim()==='') {
        return callback(new Error("请输入登录账号"));
      }
      // 表内容合法; 一定的要手动调用一次callback
      callback();
    };
    var validatePassword = (rule, value, callback) => {
      if (value.trim() === '') {
        return callback(new Error("请输入登录密码"));
      } 
      // 表内容合法; 一定的要手动调用一次callback
      callback();
    };
    return {
      // 表单数据
      ruleForm: {
        username: "",
        password: ""
      },
      // 表单数据校验规则
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      }
    };
  },
  methods: {
    submitForm(formName) {
      // 执行表单校验
      this.$refs[formName].validate(valid => {
        // 表单检验通过
        if (valid) {
          // alert("submit!");
          this.$http.post('/index.php?c=login&a=login',{
            username:this.ruleForm.username,
            password:this.ruleForm.password
          }).then(res=>{
            if(res.errcode==0){
              this.$message({
                 message: '登录成功!!!',
                 type: 'success'
              });
              setTimeout(()=>{
                  this.$router.push('/product-list');
              },800);
              // 登录成功; 将登录凭证写入本地储存sessionStorage中
              sessionStorage.setItem('token',res.token);
            }else{
              this.$message({
                 message: '用户名或密码错误!!!',
                 type: 'error'
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang="less">
.container-login{
    position: relative;
    width: 100%;
    height: 100%;
    background: url('../assets/login-bg.jpg');
    background-size: 100% 100%;
    .login-wrap {
        position: absolute;
        width: 498px;
        height: 283px;
        top: 172px;
        left: 0;
        right: 0;
        margin: auto;
        background: rgba(255,255,255,.8);
        padding:20px;
        padding-top: 80px;
        border-radius:4px;
        .login-logo{
          position: absolute;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          border:6px solid #FFF;
          background: url('../assets/vue.png');
          background-color: #F1F1F1;
          background-size: contain;
          top:-96px;
          left:50%;
          transform: translateX(-50%);
        }
    }
}

</style>